<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>day4 demo </title>
<style type="text/css">

	.ball{
		width: 15px;height: 15px;
		background-color: red;
		border-radius: 50%;
	}


</style>
</head>
<body>

<ol>
	<h3></h3>
	<li>props是父传子，$emit是子传父</li>
</ol>



<hr><hr>



<div id="app">
	
	<mycom2 @func123='show'> </mycom2>
	
</div>


<template id="tmp1"> 
	<div>
		<h1>这是 子组件</h1>
		<input type="button" @click="myclick" value="这是子组件的按钮">
	</div>
</template>







<br>
<script src="vue.js"></script>

<script type="text/javascript">

	var com2 = {
		template:'#tmp1',
		methods:{//定义com2实例的自己的方法
			 myshow(){console.log("这是全局组件的methods属性的myshow方法")},
			
			
			myclick(){
				// emit英文原意为：触发、调用、发射的意思,this只想com2实例
				this.$emit('func123')
			}
			
		}


	}




	var app = new Vue({
	  el: '#app',

	  data: {

	  },

	  methods:{//methods结束
	  	show(){
	  		alert("123")
	  	}

	},
		
	  components:{
	  	'mycom2':com2
	}






})





</script>

	
</body>
</html>